<template>
  <div class="map_address">
    <!-- <div class="toolbar">
      当前坐标: {{ lng }}, {{ lat }}
    </div> -->
    <div
      class="address-wrapper"
      :style="{width:'100%',height:'100%'}"
    >
      <!--  map-style="dark"   :events="events" -->
      <el-amap
        vid="amap"
        class="amap-demo"
        :amap-manager="amapManager"
        :plugin="plugin"
        :center="center"
        :zoom="zoom"
      >
        <!-- 点标记在地图上显示的位置，默认为地图中心点， -->
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :icon="marker.icon" :events="marker.events" :position="marker.position" />
        <!-- <el-amap-marker
          v-for="(marker,index) in markers"
          :key="'marker'+index"
          :position="marker"
        /> -->
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="window.visible"
          :content="window.content"
          :offset="window.offset"
          :close-when-click-map="true"
          :is-custom="true"
        >
          <div id="info-window">
            <div style="padding: 5px;color:black">
              浙里药店管理平台
              <!-- <div style="padding:2px">投资地点:{{ window.address }}</div>
              <div style="padding:2px">投资总额:{{ window.money }}</div>
              <div style="padding:2px">开工日期:{{ window.time }}</div>
              <div style="padding:2px">计划竣工:{{ window.endTime }}</div> -->
            </div>
            <div class="detail" @click="checkDetail">查看详情</div>
          </div>
        </el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>

<script>
// 引入获取实例
import { AMapManager } from 'vue-amap';
const amapManager = new AMapManager();
// let Geocoder; // 先声明变量
export default {
  data() {
    const self = this;
    return {
      windows: [],
      window: '',
      center: [0, 0],
      loaded: false,
      zoom: 15,
      input: '',
      lng: 0,
      lat: 0,
      amapManager,
      data: [{
        position: '120.583943, 30.05091',
        money: '10000万元',
        time: '2021-10-23',
        endTime: '2041-10-23',
        address: '绍兴市人民政府',
        url: require('@/assets/images/mapper/position.png')
      }
        // {
        //   position: '120.592183, 30.03813',
        //   money: '20000万元',
        //   address: '智慧旅游',
        //   time: '2021-10-23',
        //   endTime: '2041-10-23',
        //   url: require('@/assets/images/mapper/position1.png')
        // },
        // {
        //   position: '120.567893, 30.047938',
        //   money: '30000万元',
        //   address: '海关',
        //   time: '2021-10-23',
        //   endTime: '2041-10-23',
        //   url: require('@/assets/images/mapper/position2.png')
        // },
        // {
        //   position: '120.571242, 30.038726',
        //   money: '40000万元',
        //   address: '不动产',
        //   time: '2021-10-23',
        //   endTime: '2041-10-23',
        //   url: require('@/assets/images/mapper/position3.png')
        // },
        // {
        //   position: '120.555549, 30.069511',
        //   money: '40000万元',
        //   address: '智慧城市',
        //   time: '2021-10-23',
        //   endTime: '2041-10-23',
        //   url: require('@/assets/images/mapper/position3.png')
        // },
        // {
        //   position: '120.496497, 30.06862',
        //   money: '40000万元',
        //   address: '黄酒小镇',
        //   time: '2021-10-23',
        //   endTime: '2041-10-23',
        //   url: require('@/assets/images/mapper/position2.png')
        // },
        // {
        //   position: '120.556235, 30.0707',
        //   money: '40000万元',
        //   address: '公园改造',
        //   time: '2021-10-23',
        //   endTime: '2041-10-23',
        //   url: require('@/assets/images/mapper/position.png')
        // },
        // {
        //   position: '120.500578, 30.039603',
        //   money: '40000万元',
        //   address: '湿地改造',
        //   time: '2021-10-23',
        //   endTime: '2041-10-23',
        //   url: require('@/assets/images/mapper/position1.png')
        // }

      ],
      markers: [], // 标记
      // events: {
      //   init: (o) => {
      //     o.getCity((result) => {
      //       console.log(result);
      //     });
      //   },
      //   click: (e) => {
      //     self.center = [e.lnglat.lng, e.lnglat.lat];
      //     console.log(self.center);
      //     self.markers = [];
      //     self.markers.push(self.center);
      //     Geocoder.getAddress(self.center, function(status, result) { // 根据坐标获取位置
      //       if (status === 'complete' && result.info === 'OK') {
      //         console.log(result.regeocode.formattedAddress);
      //         self.input = result.regeocode.formattedAddress;
      //         document.querySelector('.search-box-wrapper input').value = self.input;
      //       }
      //     });
      //   }
      // },
      plugin: [
        {
          enableHighAccuracy: true, // 是否使用高精度定位，默认true
          timeout: 100, // 超过10秒后停止定位，默认：无穷大
          convert: true, // 自动偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: 'RB', // 定位按钮停靠位置，默认'LB'，左下角
          showMarker: false, // 定位成功后在定位到的位置显示标记，默认：true
          showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, // 定位成功后将定位到的位置作为地图中心点，默认true
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          extensions: 'all',
          pName: 'Geolocation', // AMap-Geolocation 定位插件
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                // if (result && result.position) {
                console.log(result.position);
                console.log('定位');
                self.lng = '120.58154'; // 设置经度
                self.lat = '30.03553'; // 设置纬度
                self.center = ['120.58154', '30.03553']; // 设置坐标
                self.markers.push(self.center); // 获取当前定位并存入标记中显示标记点
                self.loaded = true; // load
                self.zoom = 12;
                self.$nextTick(); // 页面渲染好后
                // }
              });
            }
          }
        },
        // Geocoder编码：根据地理名称来获得地点的经纬度
        {
          pName: 'Geocoder',
          events: {
            init: (o) => {
              // Geocoder = o; // o 则是AMap.Geocoder的实例 对外部的Geocoder变量进行赋值，在任何地方就都可以使用
              // data里的events中使用了Geocoder
              o.getAddress(self.center, function(status, result) { // 根据坐标获取位置
                if (status === 'complete' && result.info === 'OK') {
                  self.input = result.regeocode.formattedAddress;
                  document.querySelector('.search-box-wrapper input').value = self.input;
                }
              });
            }
          }
        }]
    };
  },
  mounted() {
    this.point();
  },
  methods: {
    point() {
      const markers = [];
      const windows = [];
      const that = this;
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(','),
          icon: item.url, // 不设置默认蓝色水滴
          events: {
            mouseover() {
              // 方法：鼠标移动到点标记上，显示相应窗体
              that.windows.forEach(window => {
                window.visible = false; // 关闭窗体
              });
              that.window = that.windows[index];
              that.$nextTick(() => {
                that.window.visible = true;
              });
            }
          }
        });
        windows.push({
          position: item.position.split(','),
          isCustom: true,
          offset: [-10, -10], // 窗体偏移
          showShadow: false,
          visible: false, // 初始是否显示
          address: item.address,
          time: item.time,
          money: item.money,
          endTime: item.endTime
        });
      });
      //  加点
      this.markers = markers;
      // 加弹窗
      this.windows = windows;
    },
    checkDetail() {
      alert('点击了查看详情');
    }
  }

};

</script>

<style scoped lang="scss">

.map_address{
  margin: 0 auto;
}
.amap-demo {
     height: calc(50vh);
    width: 100%;
    }
    .amap-page-container {
      position: relative;
    }
    #info-window{
      width: 211px;
      height: 146px;
      margin-left: 30px;
      background:rgba(255,255,255,0.9);
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      .detail{
        width: 100%;
        height: 24px;
        color: #fff;
        background-color: #1a73e8;
        position: absolute;
        bottom: 0;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
      }
    }

</style>

